<template>
    <el-container v-loading="loading">
        <div class="container">
            <el-aside class="aside" v-if="!isMobile">
                <KeepAlive>
                    <SearchColumn :searchItems="searchItems" :updateTable="updateTable" :handleOption="handleOption" :showDownload="false" :initSelectedValues="initSelectedValues"/>
                </KeepAlive>
            </el-aside>
            <div class="searchbar" v-else>
                <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                    Search Conditions
                </el-button>
                <el-drawer
                    v-model="drawer"
                    direction="ltr"
                    size="50%"
                    >
                    <KeepAlive>
                        <SearchColumn :searchItems="searchItems" :updateTable="updateTable" :handleOption="handleOption" :showDownload="false" :initSelectedValues="initSelectedValues"/>
                    </KeepAlive>   
                </el-drawer>
            </div>
            <el-main>
                <div>
                    <el-table 
                        :data="tableData" 
                        style="width: 100%"
                        @row-click="handleRowClick"
                        >
                        <el-table-column prop="fields.gse_title" label="Title">
                            <template #default="scope">
                                <a class="title" @click="checkDetail(scope.row)">{{ scope.row.fields.gse_title }}</a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fields.experiment_type" label="Experiment Type" width="130"></el-table-column>
                        <el-table-column prop="fields.sample_type" label="Sample Type"></el-table-column>
                    </el-table>
                </div>

                <div class="pagination">
                    <el-pagination
                        v-model:current-page="currentPage"
                        :page-size="currentPageSize"
                        background
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next,"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </el-main>
        </div>
    </el-container>
</template>

<script lang="ts" setup name="Data">
    import { post } from '../../axios/api';
    import { ElMessage } from 'element-plus'
    import { onBeforeMount, ref } from 'vue';
    import { useRouter } from 'vue-router';
    import SearchColumn from '@/components/SearchColumn.vue'
    import { useRoute } from 'vue-router';
    import { experimentIndex } from './dataConfigs';


    let loading = ref(false);
    let tableData = ref([]);

    let total = ref(0)
    let currentPage = ref(1)
    let currentPageSize = ref(10)
    const router = useRouter()
    const route = useRoute()

    let selectedValues = ref();
    let initSelectedValues = ref();
    let isMobile = ref(window.innerWidth <= 768)
    const drawer = ref(false)

    let searchItems = ref([
        {label: 'Experiment Type', value: 'experiment_type', options: {}, type: 'single-select'},
        {label: 'GSE', value: 'gse_title', options: {}, type: 'single-select'},
        {label: 'Sample Type', value: 'sample_type', options: {}, type: 'single-select'},
    ])


    async function getData(page: number, page_size: number, params: any) {
        let res:any = {}
        let data = {
            page,
            page_size,
            params: Object.keys(params).length === 0 ? undefined : params
        }
        loading.value = true
        try {
            res = await post('/get_data/', data)
            if (res && res.success) {
                tableData.value = res.list
                currentPage.value = res.page
                total.value = res.total
                loading.value = false
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }

    async function handleSizeChange(val: number) {
        currentPageSize.value = val
        let data = {
            page: currentPage.value,
            page_size: val,
            params: selectedValues.value
        }
        let res:any = {}
        loading.value = true
        try {
            res = await post('/get_data/', data)
            if (res && res.success) {
                loading.value = false
                tableData.value = res.list
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }
    async function handleCurrentChange(val: number) {
        let data = {
            page: val,
            page_size: currentPageSize.value,
            params: selectedValues.value
        }
        let res:any = {}
        loading.value = true
        try {
            res = await post('/get_data/', data)
            if (res && res.success) {
                loading.value = false
                currentPage.value = val
                tableData.value = res.list
            }
        } catch (error:any) {
            loading.value = false
            ElMessage({
                message: error,
                type: 'error',
            })
        }
    }

    function handleRowClick(row: any) {
        router.push({
            name:'detail',
            params: {
                title: row.fields.gse_title,
                sampleType: row.fields.sample_type,
                experimentType: row.fields.experiment_type,
            }
        })
    }

    function checkDetail(row: any) {
        router.push({
            name:'detail',
            params: {
                title: row.fields.gse_title,
                sampleType: row.fields.sample_type,
                experimentType: row.fields.experiment_type,
            }
        })
    }

    async function handleOption(items: any) {
        loading.value = true
        for (let item of items) {
            let res:any = {}
            try {
                res = await post('/get_options/', {option: item.value, params: selectedValues.value ? selectedValues.value : {}})
            } catch (error:any) {
                ElMessage({
                    message: error,
                    type: 'error',
                })
            }
            if (res && res.success) {
                loading.value = false
                let target:any = searchItems.value.find((el: any) => el.value === item.value)
                target.options = res.data

            }
        }
    }

    function updateTable(val: any) {
        selectedValues.value = val;
        let query = val
        getData(currentPage.value, currentPageSize.value, query)
    }

    onBeforeMount(() => {
        handleOption(searchItems.value)
        if (route.params.experimentType && route.params.experimentType != 'none') {
            initSelectedValues.value = {
                experiment_type: route.params.experimentType,
            }
            selectedValues.value = {
                experiment_type: route.params.experimentType,
            }
            getData(currentPage.value, currentPageSize.value, {experiment_type: route.params.experimentType})
        } else if (route.params.sampleType && route.params.sampleType != 'none') {
            initSelectedValues.value = {
                sample_type: route.params.sampleType,
            }
            selectedValues.value = {
                sample_type: route.params.sampleType,
            }
            getData(currentPage.value, currentPageSize.value, {sample_type: route.params.sampleType})
        } else {
            getData(currentPage.value, currentPageSize.value, {})
        }
        
        
    })
    


</script>

<style scoped>

    .title {
        cursor: pointer;
    }

    a:hover {
        color: rgb(24, 188, 146);
    }

    .pagination {
        margin: 20px 10px;
        display: flex;
        justify-content: center;
    }

    .aside{
        width: 20%;
        background-color: rgb(236,240,241);
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .container {
        width: 100%;
        display: flex;
    }

    @media screen and (max-width: 768px) {
        .container {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
    }
</style>